import React from 'react'
import './index.css'
import { nanoid } from 'nanoid'
export default function Header({ todoList, setTodoList }) {
  const keyUpHandle = (e) => {
    if (e.keyCode !== 13) return
    const publishValue = e.target.value.trim()
    if (!publishValue) return alert("输入内容不能为空")
    setTodoList([{ id: nanoid(), name: publishValue, done: false }, ...todoList])
    e.target.value=''
  }
  return (
    <div className="todo-header">
      <input onKeyUp={keyUpHandle}
        type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
